<template>
  <div class="login-form">
    <a-form-model
        id="components-form-demo-normal-login"
        ref="loginFormRef"
        :model="loginForm"
        :rules="rules"
    >
      <h1>欢迎回家，请登录</h1>
      <a-form-model-item ref="name" prop="username">
        <a-input
            v-model="loginForm.username"
            placeholder="Username"
            @blur="
          () => {
            $refs.name.onFieldBlur();
          }
        "
        >
        <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
        </a-input>
      </a-form-model-item>
      <a-form-model-item prop="password">
        <a-input v-model="loginForm.password"
                 type="password"
                 placeholder="Password"
        >
          <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)"/>
        </a-input>
      </a-form-model-item>
      <a-form-model-item>
        <a-checkbox>
          记住我 [暂时不可用]
        </a-checkbox>
        <a class="login-form-forgot" @click="forget">
          忘记密码
        </a>
        <a-button
            type="primary"
            html-type="submit"
            class="login-form-button"
            @click="login"
        >
          Log in
        </a-button>
        或者
        <a @click="register">
          立刻注册!
        </a>
      </a-form-model-item>
    </a-form-model>
  </div>

</template>

<script>
export default {
  // beforeCreate() {
  //   this.form = this.$form.createForm(this, {name: 'normal_login'});
  // },
  data() {
    return {
      // 定义各种输入校验
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 5, message: '用户名长度在 3 到 5 之间', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 8, max: 16, message: '密码长度在 8 到 16 之间', trigger: 'blur' },
        ]
      },
      loginForm: {
        username: 'admin',
        password: '12345678'
      },
    }
  },
  methods: {
    register() {
      this.$router.push("/register");
    },
    forget() {
      this.$router.push("/forget");
    },
    login() {
      // const that = this;
      // 表单预验证
      this.$refs.loginFormRef.validate(valid => {
        if (valid === true) {
          // 提示登录信息
          this.$message.loading('正在登录，请稍后..',1);
          this.$axios
              .post('http://localhost:8888/login', this.loginForm)
              .then(response => {
                console.log(response.data);
                // 更新token
                window.localStorage.setItem('token', response.data.token);
                this.$message.success("登录成功！", 1.0);
                this.$router.push('/home');
              }).catch(error => {
                this.$message.error("账号或密码有误，请重新登录",1);
                console.log(error);
                window.localStorage.clear();
          });
        }
      });
    }
  },
};
</script>
<style>
#components-form-demo-normal-login .login-form {
  max-width: 300px;
}

#components-form-demo-normal-login .login-form-forgot {
  float: right;
}

#components-form-demo-normal-login .login-form-button {
  width: 100%;
}

.login-form {
  width: 500px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>
